<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>R4R - Readiness for Ref</title>
<link href="<%= request.getContextPath() %>/css/r4r.css" type="text/css" rel="stylesheet" media="screen" />
<link href="<%= request.getContextPath() %>/css/custom-theme/jquery-ui-1.8.11.custom.css" type="text/css" rel="stylesheet" media="screen" />
<script type="application/javascript" src="<%= request.getContextPath() %>/js/jquery-1.5.2.min.js"></script>
<script type="application/javascript" src="<%= request.getContextPath() %>/js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="application/javascript">
	$(function() {
		function validate() {
			var gotvals = $(".url, .pid").filter(function() {
				return $.trim($(this).val()) != "";
			}).length;
			$("#submit_button").attr("disabled", gotvals <= 1);
		}
		$(".pid, .url").keyup(validate);

		$(".pid").autocomplete({
			source: function(request, response) {
				$.ajax({
					url: "/fedora/objects",
					type: "GET",
					data: {
						terms: request.term,
						pid: "true",
						resultFormat: "xml",
						label: "true",
					},
					success: function(data) {
						response($(data).find("pid").map(function(i, elem) {
							return $(elem).text();
						}));
					},
					error: function(){
					},
				});
			},
			minLength: 2,
			delay: 500,
		});
	});
</script>
</head>
<body>
	<div id="header">
		<H1>R4R - Readiness for Ref</H1>
	</div>
	<div id="form_holder">	
		<form method="get" action="<%= request.getContextPath() %>/Cerif4Ref" id="r4r_form">
			<div class="form_body">
				<fieldset>
					<legend>Repository Options</legend>
					<div class="form_element">
						<label for="hostname">Hostname</label>
						<input name="hostname" id="hostname" value="<%= request.getServerName() %>" />
					</div>				
					<div class="form_element">
						<label for="port">Port</label>
						<input name="port" id="port" value="<%= request.getServerPort() %>" />
					</div>				
				</fieldset>
				<fieldset>			
					<legend>Transformation Sources</legend>
					<div class="form_element">
						<label for="pid1">PID 1</label>
						<input name="pid" class="pid" id="pid1" />
					</div>
					<div class="form_element">
						<label for="pid2">PID 2</label>
						<input name="pid" class="pid" id="pid2" />
					</div>
					<div class="form_element">
						<label for="pid3">PID 3</label>
						<input name="pid" class="pid" id="pid3" />
					</div>
					<div class="form_element">
						<label for="url1">URL 1</label>
						<input name="source" class="url" id="url1" />
					</div>
					<div class="form_element">
						<label for="url2">URL 2</label>
						<input name="source" class="url" id="url2" />
					</div>
					<div class="form_element">
						<label for="url3">URL 3</label>
						<input name="source" class="url" id="url3" />
					</div>
					<div class="form_element">
						<label for="url3">Stylesheet URL </label>
						<input name="style" class="xsl" id="xsl" />
					</div>							
				</fieldset>
				<fieldset>
					<legend>Export Options</legend>
					<div class="form_element">
						<label for="zip">Zip Output</label>
						<input type="checkbox" value="true" name="zip" class="zip" id="zip" />
					</div>							
				</fieldset>
			</div>
			<div class="form_footer">
				<input type="submit" id="submit_button" disabled="disabled" />
			</div>
		</form>	
	</div>
</body>
</html>